<template>
  <div>
    <div class="pane_comment">
      <div class="pane_left">
        <el-avatar :size="50" :src="avatarUrl"></el-avatar>
      </div>
      <div class="pane_right">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" clearable placeholder="评论" v-model="textarea" @keydown.enter="pushCommend()"> </el-input>
        <div class="pane_btn">
          <el-button size="mini" type="primary" plain @click="pushCommend()">评论</el-button>
        </div>
      </div>
    </div>
    <div class="pane_content" v-if="commentList.length">
      <h4>最新评论</h4>
      <div class="comment_main">
        <div class="comment_item" v-for="(item, index) in commentList" :key="index">
          <div class="comment_item_left">
            <el-avatar :size="50" :src="item.user.avatarUrl"></el-avatar>
          </div>
          <div class="comment_item_right">
            <div class="comment_top">
              <div class="comment_name">{{ item.user.nickname }} :</div>
              <div class="comment_title">{{ item.content }}</div>
            </div>
            <div class="comment_co" v-if="item.beReplied[0] && item.beReplied[0].content">
              <div class="comment_name">{{ item.beReplied[0].user.nickname }} :</div>
              <div class="comment_title">{{ item.beReplied[0].content }}</div>
            </div>
            <div class="coomment_bottom">
              <div class="comment_time">{{ _formatDate(item.time) }}</div>
              <div class="comment_interact">
                <div class="comment_interact_give"></div>
                <div class="comment_interact_reply">回复</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { _getSubComment } from '../../../network/detail'
import { formatDate } from '../../../utils/formatDate'
import { mapMutations, mapState } from 'vuex'

export default {
  name: 'Comment',
  data() {
    return {
      textarea: null,
      send: 1 // 1 发送, 2 回复
    }
  },
  props: {
    commentList: {
      type: Array,
      default: () => []
    },
    id: {
      type: Number,
      default: 0
    },
    commnetType: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapState(['avatarUrl', 'cookie'])
  },
  mounted() {
    this.GET_COOKIE()
  },
  methods: {
    ...mapMutations(['GET_COOKIE']),
    // 发表评论
    pushCommend() {
      this.send = 1
      _getSubComment(this.cookie, this.id, this.send, this.textarea, this.commnetType).then((res) => {
        console.log(res)
        if (res.data.code !== 200) {
          this.$message.error('发表评论失败')
        } else {
          this.$message.success('发表评论成功')
          this.textarea = ''
        }
      })
    },
    // 格式化时间
    _formatDate(time) {
      return formatDate(new Date(time), 'yyyy年MM月dd日 hh:mm:ss')
    }
  }
}
</script>

<style lang="less">
.pane_comment {
  width: 100%;
  display: flex;
  .pane_left {
    width: 10%;
  }
  .pane_right {
    width: 90%;
    .pane_btn {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
.pane_content {
  h4 {
    border-bottom: 2px solid #cfcfcf;
  }
  .comment_item {
    width: 100%;
    border-bottom: 1px solid #cfcfcf;
    padding: 10px 0;
    display: flex;
    .comment_item_left {
      width: 8%;
    }
    .comment_item_right {
      width: 92%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .comment_top {
        display: flex;
        width: 100%;
        font-size: 12px;
        .comment_name {
          padding-right: 4px;
          color: var(--primary);
        }
        .comment_title {
          color: #333;
        }
      }
      .comment_co {
        width: 90%;
        padding: 6px 0 6px 10px;
        background-color: #f4f4f4;
        border: 1px solid #cfcfcf;
        display: flex;
        margin: 6px auto;
        font-size: 12px;
        .comment_name {
          padding-right: 4px;
          color: var(--primary);
        }
        .comment_title {
          color: #333;
        }
      }
      .coomment_bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        .comment_time {
          color: #999;
        }
        .comment_interact {
          display: flex;
          color: #333;
          .comment_interact_give {
            padding-right: 6px;
          }
          .comment_interact_reply {
          }
        }
      }
    }
  }
}
</style>
